<template>
    <div>
        <el-row>
            <el-col :xs=24 :sm=12>
                <el-form ref="form" :rules="rules" :model="form" label-width="100px" :loading="loading">
                    <el-form-item label="系统" prop="os">
                        <select-os v-model="form.os"></select-os>
                    </el-form-item>
                    <el-form-item label="渠道" prop="source">
                        <select-app-source v-model="form.source"></select-app-source>
                    </el-form-item>
<!--                    <el-form-item label="版本号" prop="version">-->
<!--                        <el-input v-model="form.version" placeholder="版本号"></el-input>-->
<!--                    </el-form-item>-->
                    <el-form-item label="备注" prop="remark">
                        <el-input v-model="form.remark" placeholder="备注"></el-input>
                    </el-form-item>
                    <el-form-item label="JSON配置">
                        <vue-json-editor v-model="form.configs" mode="code" :modes="['code']" lang="zh" :expandedOnStart="true" style="height: 100%;"></vue-json-editor>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :loading="submitLoading" @click="update" v-if="form.id">更新</el-button>
                        <el-button type="primary" :loading="submitLoading" @click="store" v-else>创建</el-button>

                        <el-button @click="$router.go(-1)">返回</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
<!--            <el-col :xs=24 :sm=12 :md="12" :lg="8" :offset="1">-->
<!--                <el-alert-->
<!--                    title="配置预览"-->
<!--                    type="info"-->
<!--                    :closable="false"-->
<!--                    :description="JSON.stringify(form.configs, null, 4)">-->
<!--                </el-alert>-->
<!--            </el-col>-->
        </el-row>
    </div>
</template>

<script>
import vueJsonEditor from 'vue-json-editor'

export default {
    components: {
        vueJsonEditor,
    },
    data() {
        return {
            loading: true,
            submitLoading: false,
            form: {
                id: 0,
                source: '',
                os: '',
                configs: {},
                // version: '',
                remark: '',
            },
            rules: {
                // source: [
                //     { required: true, message: '请选择所属渠道', trigger: 'blur' },
                // ],
                os: [
                    { required: true, message: '请选择系统类型', trigger: 'blur' },
                ],
                // version: [
                //     { required: true, message: '请输入版本号', trigger: 'blur' },
                // ],
            },
            options: this.$store.state.clientConfig.options,
        }
    },
    computed: {

    },
    watch: {

    },
    methods: {
        // 获取数据
        getData() {
            this.loading = true;
            this.$store.dispatch('clientConfig/Show', this.form.id).then(res => {
                this.form = res.data;
            }).finally(error => {
                this.loading = false;
            });
        },
        // 保存
        store() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.submitLoading = true;
                this.$store.dispatch('clientConfig/Store', this.form).then(res => {
                    this.$message.success(res.data.message);
                    this.$router.go(-1);
                }).finally(() => {
                    this.submitLoading = false;
                });
            });
        },
        // 更新
        update() {
            this.$refs.form.validate(valid => {
                if (!valid) return false;
                this.submitLoading = true;
                this.$store.dispatch('clientConfig/Update', this.form).then(res => {
                    this.$message.success(res.data.message);
                    this.$router.go(-1);
                }).finally(() => {
                    this.submitLoading = false;
                });
            });
        },
    },
    created () {
        if (this.$route.params.id) {
            this.form.id = this.$route.params.id;
            this.getData();
        } else {
            this.loading = false;
        }
    }
}
</script>

<style lang="scss">
div.jsoneditor {
    height: 400px;
}

</style>

